<template>
  <el-tabs v-model="dataArray.activeName" @tab-remove="removeTab" type="card">
    <el-tab-pane v-for="item in dataArray.tabsList"
                 :label="item.title"
                 :key="item.name"
                 :closable="item.closed"
                 :name="item.name">

      <homePage v-if="item.components === '0-0'"></homePage>
      <proxy v-if="item.components === '1-1'"></proxy>
      <spiderTable v-else-if="item.components === '1-2'"></spiderTable>
      <tasksMonitor v-else-if="item.components === '1-3'"></tasksMonitor>
      <dataDownload v-else-if="item.components === '1-4'"></dataDownload>
      <spider v-else-if="item.components ==='1-5'"></spider>
      <spiderPrecise v-else-if="item.components ==='1-6'"></spiderPrecise>
      <single-form v-else-if="item.components ==='1-6-1'"></single-form>
      <table-form v-else-if="item.components ==='1-6-2'"></table-form>
      <list-form v-else-if="item.components ==='1-6-3'"></list-form>
      <url-form v-else-if="item.components ==='1-6-4'"></url-form>
      <label-search-form v-else-if="item.components ==='1-7'"></label-search-form>
      <spiderHouseSource v-else-if="item.components ==='1-8'"></spiderHouseSource>
      <logMonitor v-else-if="item.components ==='2-1'"></logMonitor>
      <userTable v-else-if="item.components ==='3-1'"></userTable>
      <my-center v-else-if="item.components ==='3-2'"></my-center>
      <about v-else-if="item.components ==='3-3'"></about>
      <StatisticalChartShow v-else-if="item.components ==='4-0'"></StatisticalChartShow>
      <showEcharts v-else-if="item.components ==='4-1'"></showEcharts>
      <searchAvgEcharts v-else-if="item.components ==='4-2'"></searchAvgEcharts>
      <showHouseAvgMap v-else-if="item.components ==='4-3'"></showHouseAvgMap>
      <forecastResult v-else-if="item.components === '4-4'"></forecastResult>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import main from './main.vue'
  import proxy from './proxyTable.vue'
  import spiderTable from './spidertable.vue'
  import tasksMonitor from './tasksMonitor.vue'
  import dataDownload from './dataDownload.vue'
  import spider from './spideradd.vue'
  import spiderPrecise from './spiderPrecise.vue'
  import userTable from './userTable.vue'
  import singleForm from './spiderForm1.vue'
  import tableForm from './spiderForm2.vue'
  import listForm from './spiderForm3.vue'
  import urlForm from './spiderForm4.vue'
  import labelSearchForm from './spiderForm5.vue'
  import spiderHouseSource from './spiderForm6.vue'
  import logMonitor from './logMonitor.vue'
  import myCenter from './myCenter.vue'
  import about from './about.vue'
  import showEcharts from './showEcharts.vue'
  import searchAvgEcharts from './searchAvgEcharts.vue'
  import showHouseAvgMap from './showHouseAvgMap.vue'
  import forecastResult from './forecastResult.vue'
  import StatisticalChartShow from './StatisticalChartShow.vue'

  export default {
    components: {
      'homePage': main,
      'proxy': proxy,
      'spider': spider,
      'spiderPrecise': spiderPrecise,
      'tasksMonitor': tasksMonitor,
      'dataDownload': dataDownload,
      'userTable': userTable,
      'spiderTable': spiderTable,
      'singleForm': singleForm,
      'tableForm': tableForm,
      'listForm': listForm,
      'urlForm': urlForm,
      'labelSearchForm': labelSearchForm,
      'spiderHouseSource': spiderHouseSource,
      'logMonitor': logMonitor,
      'myCenter': myCenter,
      'about': about,
      'showEcharts': showEcharts,
      'searchAvgEcharts': searchAvgEcharts,
      'showHouseAvgMap': showHouseAvgMap,
      'forecastResult': forecastResult,
      'StatisticalChartShow': StatisticalChartShow
    },
    data () {
      return {
        dataArray: this.$store.state
      }
    },
    methods: {
      removeTab (targetName) {
        this.$store.dispatch('deleteTab', targetName)
      }
    }
  }

</script>
